<template>
  <div>
    <!-- 搜索框 -->
    <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" />
    <!-- 下方内容 -->
    <div class="bottom_box">
      <!-- 左边边侧框 -->
      <van-sidebar v-model="activeKey" >
        <van-sidebar-item
          :title="item.name"
          v-for="item in categoryList"
          :key="item.id"
          @click="onChange(item.id)"
        />
      </van-sidebar>
      <!-- 右边 -->
      <div class="right">
        <img :src="currentCategory.banner_url" alt="" />
        <h3>— {{ currentCategory.name }} —</h3>
        <van-grid :column-num="3" :border="false">
          <van-grid-item
            v-for="item in currentCategory.subCategoryList"
            :key="item.id"
            :icon="item.banner_url"
            :text="item.name"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { getCategoryData , getcurrentCategory} from "@/utils/http";
export default {
  name: "Category",
  props: [""],
  data() {
    return {
      value: "", //搜索框关键字
      activeKey: 0, //默认的导航索引
      categoryList: [], //左侧导航
      currentCategory: {}, //当前分类
    };
  },
  created() { 
    //初始化调用
    this.getData()
  },
  methods: {
    onChange(id) {
      //切换左侧导航
    //   this.activeKey = index;
    //   console.log(id);
      getcurrentCategory({id:id})
      .then((res)=>{
        // console.log(res);
        this.currentCategory=res.data.data.currentCategory;
      }).catch((e)=>{
        console.log(e);
      })
    },
    getData(){
      getCategoryData().then((res) => {
        // console.log(res);
        this.categoryList = res.data.data.categoryList;
        this.currentCategory = res.data.data.currentCategory;
      });
    },
  },
};
</script>

<style lang='less' scoped>
.bottom_box {
  display: flex;
  .right {
    flex: 1;
    img {
      width: 100%;
      display: block;
    }
    h3 {
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 7px;
    }
  }
}
</style>